<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./resrt.css">
    <style>
        #app{
            width: 1100px;
            height: 800px;
            margin: 50px auto;
            box-sizing: border-box;
            padding: 20px;
            display: flex;
        }
        .shop{
            width: 600px;
            height: 100%;
        }
        h1{
            font-size: 24px;
            line-height: 50px;
        }
        .shops{
            width: 100%;
            display: flex;
            box-sizing: border-box;
            padding: 20px;
            flex-wrap: wrap;
        }
        .list{
            width: 150px ;
            height: 200px;
            margin-right: 20px;
        }
        .list img{
            width: 120px;
            text-align: center;
        }
        h2{
            line-height: 20px;
        }
        h3 button{
            height: 20px;
        }
        .shopping{
            flex: 1;
            box-sizing: border-box;
            padding: 20px;
        }
        .shoplist{
            width: 100%;
            display: flex;
            justify-content: space-between;
            height: 100px;
        }
        .shoplist img{
            height: 90px;
            margin-top: 5px;
        }
        .shoplist p{
            font-size: 20px;
            line-height: 100px;
            margin-left: 20px;
        }
        .shoplist .num{
            display: flex;
            height: 30px;
            margin-top: 35px;
            width: 150px;
            justify-content: space-between;
        }
        .num button{
            height: 30px;
            width: 30px;
        }
        .num h4{
            line-height: 30px;
            text-align: center;
        }
        .move{
            height: 30px;
            margin-top: 35px;
            margin-left: 10px;
        }
        .money{
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="shop">
            <h1>商品</h1>
            <div class="shops" >
                <div class="list" v-for="(item , index) in shop" :key="index">
                    <img :src="item.pic" alt="">
                    <h2>价格 {{item.money}} </h2>
                    <h2>商品： {{item.name}} </h2>
                    <h3>
                        <button @click="add(item)">加入购物车</button>
                    </h3>
                </div>
            </div>
        </div>
        <div class="shopping" >
            <div class="money">
                <span>总数：{{zongshu}} </span>
                <span>总金额：{{zongjia}} </span>
            </div>
            <div class="shoplist"  v-for="(item , index) in shopping" :key="index" v-show="shopping.length != 0">
                <img :src="item.pic" alt="">
                <p> {{item.name}} </p>
                <div class="num">
                    <button @click="jia(item)">-</button>
                    <h4> {{item.num}} </h4>
                    <button @click="jian(item)">+</button>
                </div>
                <button class="move" @click="move(index)">删除</button>
            </div>
        </div>
    </div>
</body>
</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v = new Vue({
        el:'#app',
        data:{
            shop:[
                {id:1 , name : '秋刀鱼' , num : 1 , money : 30 , pic : './pic.jpg'},
                {id:2 , name : '大鲨鱼' , num : 1 , money : 44 , pic : './pic.jpg'},
                {id:3 , name : '海豚' , num : 1 , money : 55 , pic : './pic.jpg'},
                {id:4 , name : '马面鱼' , num : 1 , money : 66 , pic : './pic.jpg'},
                {id:5 , name : '河豚' , num : 1 , money : 77 , pic : './pic.jpg'},
                {id:6 , name : '金枪鱼' , num : 1 , money : 88 , pic : './pic.jpg'},
                {id:7 , name : '这个鱼' , num : 1 , money : 99 , pic : './pic.jpg'},
                {id:8 , name : '那个鱼' , num : 1 , money : 101 , pic : './pic.jpg'},
            ],
            shopping:[

            ]
        },
        methods:{
            add(item){
                this.shopping.indexOf(item) == -1 ? this.shopping.push(item) : this.shopping[this.shopping.indexOf(item)].num < 5 ? this.shopping[this.shopping.indexOf(item)].num++ : ''
            },
            jia(item){
                item.num > 1 ? item.num-- : ''
            },
            jian(item){
                item.num < 5 ? item.num++ : ''
            },
            move(index){
                this.shopping.splice(index , 1)
            }
        },
        computed:{
            zongshu(){
                var sum = 0
                this.shopping.map((item) => {
                    sum += item.num 
                })
                return sum
            },
            zongjia(){
                var money = 0
                this.shopping.map((item) => {
                    money += (item.num * item.money)
                })
                return money
            }
        },
        watch:{

        }
    })
</script>